<template>
    <div>
      <el-card>

        <el-row>

          <el-button type="primary" @click="toAdd()">新增信息</el-button>
        </el-row>

        <el-table
          :data="goodsList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="image"
            label="缩略图"
            width="180">
            <template slot-scope="scope">
              <el-image :src="'/api/goods/download/'+scope.row.image" style="width: 70px;height: 70px"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsName"
            label="商品名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="goodsTitle"
            label="标题"
            width="180">
          </el-table-column>
          <el-table-column
            label="类型"
            width="100">
            <template slot-scope="scope">
              {{scope.row.type | typeFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="原价格"
            width="100">
          </el-table-column>
          <el-table-column
            prop="costPrice"
            label="秒杀价格"
            width="100">
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="180">
            <template slot-scope="scope">
              {{scope.row.startTime | timeFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="180">
            <template slot-scope="scope">
              {{scope.row.endTime | timeFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            label="秒杀数量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="stockNum"
            label="库存数量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="120">
            <template slot-scope="scope">
              {{scope.row.status | statusFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-dropdown split-button type="primary"  size="normal" >
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.status==2 || scope.row.status==0">
                    <el-button type="text" @click="">
                      上架
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.status==0">
                    <el-button type="text" @click="update(scope.row.id)">
                      编辑
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.status!=1">
                    <el-button type="text" @click="del(scope.row.id)">
                      删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog :title="addForm.id==null?'新增信息':'编辑信息'" :visible.sync="dialogFormVisible" @closed="clearForm" :close-on-click-modal="false">
          <el-form :model="addForm" :rules="addRules" ref="addFormRule">
            <el-row :gutter="22">
              <el-col :span="12">
                <el-form-item label="缩略图" prop="image">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/goods/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="addForm.image!=''" :src="'/api/goods/download/'+this.addForm.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标题" prop="goodsTitle">
                  <el-input v-model="addForm.goodsTitle"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="22">
              <el-col :span="8">
                <el-form-item label="商品名称" prop="goodsName">
                  <el-input v-model="addForm.goodsName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品类型" prop="type">
                  <el-select v-model="addForm.type">
                    <el-option :value="1" label="电脑"></el-option>
                    <el-option :value="2" label="手机"></el-option>
                    <el-option :value="3" label="生活用品"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="原价（元）" prop="price">
                  <el-input v-model="addForm.price"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="22">
              <el-col :span="8">
                <el-form-item label="秒杀价（元）" prop="costPrice">
                  <el-input v-model="addForm.costPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="秒杀数量" prop="num">
                  <el-input v-model="addForm.num" @blur="liandong()"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="库存量" prop="stockNum">
                  <el-input v-model="addForm.stockNum" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="22">
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startTime">
                  <el-date-picker
                    v-model="addForm.startTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    v-model="addForm.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </div>
        </el-dialog>

      </el-card>
    </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "GoodsList",
        data(){
          return{
            goodsList:[],
            dialogFormVisible:false,
            addForm:{
              image:'',
              stockNum:'',
              num:''
            },
            addRules:{//表单验证
              image:[
                {required:true,message:'缩略图不能为空！',trigger:'blur'}
              ],
              goodsTitle:[
                {required:true,message:'标题不能为空！',trigger:'blur'}
              ],
              goodsName:[
                {required:true,message:'商品名称不能为空！',trigger:'blur'}
              ],
              type:[
                {required:true,message:'商品类型不能为空！',trigger:'blur'}
              ],
              price:[
                {required:true,message:'原价不能为空！',trigger:'blur'},
                {pattern:/^[1-9][0-9]*$/,message: '请输入正确的价格',trigger: 'blur'}
              ],
              costPrice:[
                {required:true,message:'秒杀价不能为空！',trigger:'blur'},
                {pattern:/^[1-9][0-9]*$/,message: '请输入正确的秒杀价格',trigger: 'blur'}
              ],
              num:[
                {required:true,message:'秒杀数量不能为空！',trigger:'blur'},
                {pattern:/^[1-9][0-9]*$/,message: '请输入正确的秒杀数量',trigger: 'blur'}
              ],
              stockNum:[
                {required:true,message:'库存数量不能为空！',trigger:'blur'},
                {pattern:/^[1-9][0-9]*$/,message: '请输入正确的库存数量',trigger: 'blur'}
              ],
              startTime:[
                {required:true,message:'开始时间不能为空！',trigger:'blur'},
              ],
              endTime:[
                {required:true,message:'结束时间不能为空！',trigger:'blur'},
              ]
            },
            seller:{
              id:null
            }

          }
        },
        methods:{
          searchList:function () {//列表
            this.$http.post("/goods/list",{}).then((res)=>{
              if(res.data.success){
                this.goodsList=res.data.result;
              }
              else{
                this.$message.error(res.data.message);
              }
            })
          },
          toAdd:function () {
            this.dialogFormVisible=true;

          },
          handleAvatarSuccess(res, file) {//上传后回调
            this.addForm.image=res.result.path;
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
          save:function () {//保存新增信息
            this.$refs['addFormRule'].validate((valid)=>{
              if(!valid){
                return;
              }

              var sid=this.seller.id;
              this.$http.post("/goods/saveGoods/"+sid,this.addForm).then((res)=>{
                if(res.data.success){
                  this.$message.success(res.data.message);
                  this.dialogFormVisible=false;
                  this.searchList();
                }
                else{
                  this.$message.error(res.data.message);
                }
              })
            })
          },
          clearForm:function () {
            this.addForm={};
          },
          liandong:function () {
            this.addForm.stockNum=this.addForm.num;
          },
          update:function (id) {//修改回显
            this.dialogFormVisible=true;
            this.$http.get("/goods/getById/"+id).then((res)=>{
              this.addForm=res.data.result;
            })
          },
          del:function (id) {
            this.$http.delete("/goods/del/"+id).then((res)=>{
              if(res.data.success){
                this.$message.success(res.data.message);
              }
              else{
                this.$message.error(res.data.message);
              }
              this.searchList();
            })
          }

        },
        filters:{
          typeFit:function (val) {
            if(val=='1'){
              return '电脑';
            }
            if(val=='2'){
              return '手机';
            }
            if(val=='3'){
              return '生活用品';
            }
          },
          timeFit:function (val) {
            return moment(val).format('YYYY-MM-DD hh:mm:ss');
          },
          statusFit:function (val) {
            if(val==0){
              return '未发布';
            }
            if(val==1){
              return '上架';
            }
            if(val==2){
              return '下架';
            }
          }
        },
        mounted() {
          this.searchList();
          //获取当前登录人
          var user=JSON.parse(sessionStorage.getItem("seller"));
          this.seller=user;
        }
    }
</script>

<style scoped lang="less">
  .avatar-uploader .el-upload {
    border: 2px dashed #792525;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
